<template>
  <div class="editInfo">
    <van-nav-bar left-arrow :title="title">
      <template #left>
        <i
          class="iconfont iconbtn_nav_back iconFont"
          @click="$router.go(-1)"
        ></i>
      </template>
      <template #right>
        <span v-if="isSave" @click="save">保存</span>
      </template>
    </van-nav-bar>
    <div class="myinput">
      <van-field v-model="value" @input="isSave = true" class="input" />
    </div>
  </div>
</template>

<script>
import { apiEditInfo } from '@/api/au.js'
export default {
  data () {
    return {
      isSave: false,
      value: '',
      title: '',
      prop: this.$route.query.prototype
    }
  },
  created () {
    if (this.prop === 'nickname') {
      this.title = '修改昵称'
    } else if (this.prop === 'intro') {
      this.title = '修改个性签名'
      // this.value = this.$store.state.userInfo.intro
    }
    this.value = this.$store.state.userInfo[this.prop]
  },
  methods: {
    async save () {
      this.$toast.loading({
        duration: 0
      })
      //   if (this.prop === 'nickname') {
      //     await apiEditInfo({ nickname: this.value })
      //   } else if (this.prop === 'intro') {
      //     await apiEditInfo({ intro: this.value })
      //   }
      await apiEditInfo({ [this.prop]: this.value })
      this.$store.dispatch('setUserInfo')
      this.$toast.success('修改成功')
      this.$router.push('/info')
    }
  }
}
</script>

<style lang="less">
.editInfo {
  font-size: 12px;
  .iconFont {
    font-size: 44px;
  }
  .van-nav-bar__left {
    padding-left: 0;
  }
  .myinput {
    margin: 12px;
    .input {
      background-color: #eee;
      border-radius: 10px;
    }
  }
}
</style>
